Skip to main content

Update Strategies

This page outlines different strategies for updating interactive content, ranging from manual methods to fully automated rendering using built-in functions.

Manual Updates​

Dedicated Update​

Use update methods specific to graphical symbols like Line, Point, Sphere, etc.

Module[{points = {}},
  {
    Graphics[{ColorData[97][1], Line[points // Offload]}, Axes -> True],
    EventHandler[
      InputGroup[{
        InputRange[0, 10, 2, 4, "Label" -> "u"],
        InputRange[0, 10, 2, 4, "Label" -> "v"]
      }],
      Function[uv,
        points = Table[{Sin[t uv[[1]]], Cos[t uv[[2]]]}, {t, 0, 2 Pi, 0.02}]
      ]
    ] // EventFire
  } // Row
]
(*GB[*){{(*VB[*)(Graphics[{RGBColor[0.368417, 0.506779, 0.709798], Line[Offload[points$473071]]}, Axes -> True])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KWlMIB4HkHAvSizIyEwuhoiA5H0yi0vSmGHyQe5Ozvk5+UVFBdMmPVWZct2+yHDay+kd5g/si463zPBete2ZPcJon8y8VAiPHUj4p6Xl5CemFPMC2QX5mXklxSom5sYG5oYIu4JKc1LBDMeK1GIwI6SoNBUAmY4tfw=="*)(*]VB*)(*|*),(*|*)(*VB[*)(EventObject[<|"Id" -> "4c8f9c10-ca8d-4db7-b9d0-84b005b6e1ee", "Initial" -> {4, 4}, "View" -> "84a7d33b-f71a-4cfc-8c1b-951443107584"|>])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKW5gkmqcYGyfpppkbJuqaJKcl61okGybpWpoampgYGxqYm1qYAACHkRVD"*)(*]VB*)}}(*]GB*)

Full Re-evaluation​

This universal method uses EditorView, allowing updates for any expression, not just graphics.

Module[{editorString = ""},
  {
    EditorView[
      editorString // Offload,
      "ReadOnly" -> True,
      "Selectable" -> False,
      "KeepMaxHeight" -> True
    ],
    EventHandler[
      InputGroup[{
        InputRange[0, 10, 2, 4, "Label" -> "u", "Topic" -> {Null, "Default"}],
        InputRange[0, 10, 2, 4, "Label" -> "v", "Topic" -> {Null, "Default"}]
      }],
      Function[uv,
        editorString = ToString[
          ParametricPlot[{Sin[t uv[[1]]], Cos[t uv[[2]]]}, {t, 0, 2 Pi}],
          StandardForm
        ]
      ]
    ] // EventFire
  } // Reverse // Column
]
(*GB[*){{(*VB[*)(EventObject[<|"Id" -> "ca139b12-08d3-47d4-955f-5ef54a260790", "Initial" -> {4, 4}, "View" -> "b8cc088c-7289-418b-9b26-978f92aa6305"|>])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKJ1kkJxtYWCTrmhtZWOqaGFok6VomGZnpWppbpFkaJSaaGRuYAgCAWRUr"*)(*]VB*)}(*||*),(*||*){(*VB[*)(FrontEndRef["eab872ed-83de-4dc9-91f3-83977bc72ff5"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKpyYmWZgbpaboWhinpOqapCRb6loaphkDuZbm5knJ5kZpaaYAkskWIQ=="*)(*]VB*)}}(*]GB*)
warning

This method may struggle with frequent updates of large expressions involving graphics. To avoid performance issues, InputRange is configured to trigger updates only upon user action.

Automatic Updates​

Optimized Rendering​

Use built-in interactive plotting functions such as ManipulatePlot and ManipulateParametricPlot for efficient rendering.

ManipulateParametricPlot[
  {Sin[t u], Cos[t v]},
  {t, 0, 2 Pi}, {u, 0, 10, 2}, {v, 0, 10, 2}
]
(*GB[*){{(*VB[*)(Graphics[{AbsoluteThickness[2], RGBColor[0.368417, 0.506779, 0.709798], Line[Offload[CoffeeLiqueur`Extensions`Manipulate`Internal`pts$438683]]}, PlotRange -> {{-1.097829401271099, 1.097829401271099}, {-1.1, 1.1}}, "TrackedExpression" -> Null, AxesLabel -> {}, Prolog -> {}, Epilog -> {}, TransitionDuration -> 50, TransitionType -> "Linear", Axes -> True, PlotRange -> Automatic, ImageSize -> {400, 300}])(*,*)(*"1:eJyFUstOwkAUrUhQY2Kif2DC0o1ihF2jSJBYHyn9gA5wBycMM3UeCbp24U5iDD4+wb1uWfoJbt1o4k7/wBkKISVEurg9d87p3HPv7XqN+3jOcRyZNuGA0wZettmiCWWBojNSl3h+xHtEqli9asJuTXKqFQRG1GIgJUmZ01htv/fLe0VOuRBR7/Yze/fuis3e9/11/sMVb1cPh8+vX+64tEcYxNmCCScYU44aMm9wkWMM4JFzDVqEpY4CJglnMjxCjESaIgVhhSkQDNEwUjK7nSvsFHI4Nbra1xTkkgGnlCsfsSaMuUFHiUw4/Z+bl+5vfwTcCf7p0T6GHwI3WalqRxMIVG9Bo9SJhJ2LcWvpY03pFFu7HZAeqgHFznRbA2XGNiDMPJszZaWIzJKtxSbNJJVxt68Fsm+yZReYVK4klMFFBNXMcF9ITGjTw24GIBAa/ltC3LtWvG1q16coK23UhCq5nFgX6ZrfhGyY8AcI3rqM"*)(*]VB*)(*|*),(*|*)(*VB[*)(EventObject[<|"Id" -> "341fbb53-ce8d-44ee-b1d2-11b0d588226b", "Initial" -> {4, 4}, "View" -> "a9865046-3cb1-4cce-a4f5-919cf81fd5e3"|>])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKJ1pamJkamJjpGicnGeqaJCen6iaapJnqWhpaJqdZGKalmKYaAwCCpxXe"*)(*]VB*)}}(*]GB*)

Full Re-evaluation​

info

Since WLJS Notebook 2.8.0 Manipulate and Animate uses JIT transpiler, that can potentially optimize your expression to the level of performance matching the manual methods.

Use the general-purpose Manipulate expression for full expression re-evaluation on each parameter change.

Manipulate[
  ParametricPlot[{Sin[t u], Cos[t v]}, {t, 0, 2 Pi}],
  {u, 0, 10, 2}, {v, 0, 10, 2}
]
(*GB[*){{(*VB[*)(EventObject[<|"Id" -> "d32daefc-5c7a-464b-91f5-4fce992efd56", "Initial" -> {4, 4}, "View" -> "84f750ae-d950-47a4-a54e-1aabdbce28f9"|>])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKW5ikmZsaJKbqpliaGuiamCea6CaamqTqGiYmJqUkJacaWaRZAgCGjBY0"*)(*]VB*)}(*||*),(*||*){(*VB[*)(FrontEndRef["9b1d9023-4122-4e21-866f-2bd1343d0ab8"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKWyYZplgaGBnrmhgaGemapBoZ6lqYmaXpGiWlGBqbGKcYJCZZAABzcRUC"*)(*]VB*)}}(*]GB*)

Mathematica Renderer​

By wrapping content with MMAView, you can delegate rendering to the native Mathematica engine. This enables high-quality, but non-interative rasterized output, bypassing limitations of WLJS 2D/3D graphics.